$(function () {
    map();
    function map() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('map_1'));
        // 使用Ajax获取数据
        $.ajax({
            url: 'donations/getAll',
            type: 'GET',
            success: function (response) {
                var data = response.data.donationsProvinceDTO;
                var donationData = {};
                data.forEach((item, index) => {
                    donationData[item.province] = Number(item.amounts);
                });
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}：{c}元',
                    },
                    visualMap: {
                        min: 0,
                        max: 10000,
                        text: ['High', 'Low'],
                        realtime: false,
                        calculable: true,
                        show: false,
                        inRange: {
                            color: ['#7fe2ef', '#e70d0d']
                        }
                    },
                    series: [{
                        name: '捐款金额',
                        type: 'map',
                        map: 'china', // 使用的地图类型
                        roam: false, // 可以通过鼠标缩放和平移来控制地图
                        data: Object.keys(donationData).map(function (key) {
                            return {name: key, value: donationData[key]};
                        }) // 格式化各省份的捐款数据
                    }]
                };
                myChart.setOption(option);
            },
            error: function (error) {
            }
        });

        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
})
